<template>
<div>

<!--  头部搜索框  输入框  查询 重置以及添加-->
  <div>
    <el-form :model="form">
    <!--      第一个输入框-->
      <div style="float: left;">
        <el-form-item label="名称：" :label-width="formLabelWidth" style="width: 150px;">
          <el-input v-model="input"  size="small"  style="width: 180px; padding-right: 15px"></el-input>
        </el-form-item>
      </div>
      <!--      第二个输入框   选择器-->
      <div style="float: left;padding-left: 100px">
        <el-form-item label="状态：" :label-width="formLabelWidth" style="width: 200px;">
          <el-select v-model="value" size="small" clearable placeholder="状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <!-- 三个按钮     -->
      <div style=" float: left;width: 300px;margin-top:3px ">
          <el-button type="primary" icon="el-icon-search" size="small" style="width: 80px;">查询</el-button>
          <el-button plain  size="small" style="width: 80px;margin-left: 10px">重置</el-button>
          <el-button type="primary"  size="small"  style="width: 80px;margin-left: 10px" @click="dialogFormVisible=true">添加</el-button>
      </div>
    </el-form>
  </div>

<!--  数据表格-->
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="名称"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="备注"
        label="备注"
        width="240">
      </el-table-column>
      <el-table-column
        prop="排序"
        label="排序"
        width="90">
      </el-table-column>
      <el-table-column
        prop="状态"
        label="状态"
        width="220">

        <!--   状态开关 组件 -->
        <template slot-scope="scope">
          <el-switch
            style="display: block"
            v-model="scope.row.statusId"
            @change="handleChangeStatus(scope.row,scope.row.statusId)"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="正常"
            inactive-text="禁用">
          </el-switch>
        </template>

      </el-table-column>
      <el-table-column
        prop="操作"
        label="操作">
        <!--操作列 的三个按钮-->
        <el-button type="danger"  size="mini" style="margin-left: 10px" @click="deleteOne">删除</el-button>
        <el-button type="success" size="mini" style="margin-left: 10px" @click="updatedialog=true">修改</el-button>
        <el-button type="success" size="mini" style="margin-left: 10px" @click="setPower=true">设置权限</el-button>
      </el-table-column>

    </el-table>
  </div>
<!--  分页  插件-->
  <div>
    <div style="float: right;margin-top: 20px">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
    </div>
  </div>

<!--  各个弹窗-->
  <div>
    <!-- 添加弹窗 -->
    <div>
      <el-dialog title="添加" :visible.sync="dialogFormVisible" width="35%">
        <el-form :model="form" style="width: 150px">
          <el-form-item label="名称  :" :label-width="formLabelWidth" >
            <el-input v-model="form.name" autocomplete="off" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="备注  :" :label-width="formLabelWidth" style="width: 150px">
            <el-input placeholder="请输入内容" type="textarea" v-model="form.desc" style="width: 300px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 修改弹窗 -->
    <div>
      <el-dialog title="角色信息修改" :visible.sync="updatedialog" width="35%">
        <el-form :model="form" style="width: 150px">
          <el-form-item label="名称  :" :label-width="formLabelWidth" style="width: 150px">
            <el-input v-model="form.name" autocomplete="off" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="排序  :" :label-width="formLabelWidth" style="width: 150px">
              <!-- :min="1" :max="10"    计数器设置最大最小值的属性           -->
            <el-input-number v-model="num" @change="handleChange" style="width: 300px;"></el-input-number>
          </el-form-item>
          <el-form-item label="备注  :" :label-width="formLabelWidth" style="width: 150px">
            <el-input placeholder="请输入内容" type="textarea" v-model="form.desc" style="width: 300px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updatedialog = false">取 消</el-button>
          <el-button type="primary" @click="updatedialog = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 设置权限弹窗 -->
    <div>
      <el-dialog title="角色设置权限" :visible.sync="setPower" width="35%">
        <el-form :model="form" style="width: 150px">
          <el-tree
            :data="data"
            show-checkbox
            default-expand-all="true"
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps">
          </el-tree>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setPower = false">取 消</el-button>
          <el-button type="primary" @click="setPower = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</div>
</template>

<script>
export default {
  name: "PowerRoles",
  data(){
    return{
      num:'1',
      currentPage: 3,   /*主页面分页的当前页默认值*/
      //主页面表格数据
      tableData: [{
        id:'1',
        名称:'sasdasd',
        备注:'asdasd',
        排序:'1',
        状态:'0',
        操作:'212212121'
      },
        {
          id:'1',
          名称:'sasdasd',
          备注:'asdasd',
          排序:'1',
          状态:'0',
          操作:'212212121'
        }],
      //el   ==》  form表单中的输入框的宽度设置
      formLabelWidth:'120px',
      // 头部  选择器的  值
      options: [{
        value: '1',
        label: '正常'
      }, {
        value: '2',
        label: '禁用'
      }],
      value: '',
      input:'',
      //form
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      dialogFormVisible:false,
      updatedialog:false,
      setPower:false,
      //权限树状图
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }




    }
  },
  methods:{
    //禁用按钮
    handleChangeStatus(obj,statusId){
      const title = { 1: '禁用', 0: '启用' }
      this.$confirm(`确定要${title[statusId]}吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.statusId=obj.statusId
      }).catch(() => {
        obj.statusId=(statusId+1)%2
      })
    },
    //分页中的方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //删除的提示窗
    deleteOne(){
      this.$confirm('确定要删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  //计数器的方法
    handleChange(value) {
      console.log(value);
    },
// *********************************  设置权限树状图的函数  ********************************    ********************************
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }




  }
}
</script>

<style scoped>

</style>
